<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useUserStore } from '@/store'
import { storeToRefs } from 'pinia'
import { showSimpleConfirmDialog } from '@/utils/useConfirmDialog'
import type { LocalUserMessageList } from '@/model'

const userStore = useUserStore()
const { showSidebar, windowList, currentWindow } = storeToRefs(userStore)
const { deleteWindow, setTestWindowList } = userStore

// 添加测试数据
setTestWindowList()

// 当前窗口

function initCurrentWindow() {
  if (windowList.value.length > 0) {
    currentWindow.value = windowList.value[0]
  }
}
onMounted(() => {
  initCurrentWindow()
})

defineOptions({
  name: 'Sidebar'
})

// 定义事件
const emit = defineEmits<{
  (e: 'new-chat'): void
  (e: 'delete-chat', id: number): void
}>()

// 创建新聊天
const handleNewChat = () => {
  emit('new-chat')
}

// 删除聊天
const handleDeleteChat = async (id: number) => {
  emit('delete-chat', id)

  try {
    await showSimpleConfirmDialog('确认删除', '您确定要删除这个聊天记录吗？此操作无法撤销。')
    // 用户点击了确定
    console.log('执行删除操作')
    // ... 删除逻辑 ...
    deleteWindow(id)
    // 重新初始化当前窗口
    initCurrentWindow()
  } catch (error) {
    console.log(error)

    // 用户点击了取消或关闭了弹窗
    console.log('取消删除')
  }
}

// 侧边栏
const changeSidebar = (isShow: boolean) => {
  showSidebar.value = isShow
}

// 选择窗口
const handleSelectWindow = (item: LocalUserMessageList) => {
  currentWindow.value = item
}
</script>

<template>
  <div
    class="fixed left-4 top-4 flex items-center justify-center rounded-full w-8 h-8 hover:bg-gray-100 cursor-pointer"
    v-if="!showSidebar"
    @click="changeSidebar(true)"
  >
    <i class="iconfont icon-ios-menu !text-lg"></i>
  </div>
  <div
    class="hidden md:flex md:w-60 flex-col border-0 border-r border-solid border-gray-200"
    v-if="showSidebar"
  >
    <!-- 顶部区域 -->
    <div class="p-4">
      <div class="flex items-center justify-between">
        <div class="flex items-center">
          <i class="iconfont icon-chat text-lg mr-2"></i>
          <span class="font-bold text-xl">TYAI Chat</span>
        </div>

        <div
          class="flex items-center hover:text-gray-600 cursor-pointer"
          @click="changeSidebar(false)"
        >
          <i class="iconfont icon-ios-arrow-back !text-lg"></i>
        </div>
      </div>
      <div
        class="flex items-center p-2 bd-1 mt-4 hover:bg-gray-100 cursor-pointer select-none"
        @click="handleNewChat"
      >
        <i class="iconfont icon-ios-add mx-1"></i>
        <span>新的聊天</span>
      </div>
    </div>

    <!-- 聊天列表 -->
    <nav class="flex-1 overflow-y-auto scroll-container">
      <div class="space-y-1">
        <div
          v-for="item in windowList"
          :key="item.id"
          class="group cursor-pointer rounded-md py-2 px-3 flex items-center hover:bg-gray-100"
          :class="{ 'bg-gray-100': currentWindow?.id === item.id }"
          @click="handleSelectWindow(item)"
        >
          <span>{{ item.windowName }}</span>
          <i
            class="iconfont icon-ios-close ml-auto text-gray-400 group-hover:opacity-100 opacity-0 hover:text-gray-600"
            @click.stop="handleDeleteChat(Number(item.id))"
          ></i>
        </div>
      </div>
    </nav>

    <!-- 底部用户信息 -->
    <div class="h-4"></div>
    <div class="bd-t p-3">
      <div class="flex items-center gap-2">
        <div class="w-8 h-8 bg-gray-800 rounded-full flex items-center justify-center text-white">
          C
        </div>
        <div class="flex-1 truncate">
          <div class="text-sm font-medium">chong chen</div>
          <div class="text-xs text-gray-500 truncate">wwwwwwww@gmail.com</div>
        </div>
      </div>
    </div>
  </div>
</template>
